<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习1：制作畅销书排行榜</title>
    <style>
        body{
            width: 300px;
        }
        .title{
            background-color: #518700;
            color: #F0F0F0;
            line-height: 30px;
            text-indent:30px;
            background-image: url("images/图片素材/bang.gif");
            background-repeat:no-repeat;
            background-position: 120px;
        }
        .body{
            text-indent:50px;
            /*background-color: #AFB1B3;*/
            /*背景渐变*/
            background-image: linear-gradient(18deg,lightyellow,yellow);
        }

        .a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a10{
            background-repeat: no-repeat;
            line-height: 30px;
            background-position: 25px;
        }

        .a1{
            background-image: url("images/图片素材/book_no01.gif");
        }
        .a2{
            background-image: url("images/图片素材/book_no02.gif");
        }
        .a3{
            background-image: url("images/图片素材/book_no03.gif");
        }
        .a4{
            background-image: url("images/图片素材/book_no04.gif");
        }
        .a5{
            background-image: url("images/图片素材/book_no05.gif");
        }
        .a6{
            background-image: url("images/图片素材/book_no06.gif");
        }
        .a7{
            background-image: url("images/图片素材/book_no07.gif");
        }
        .a8{
            background-image: url("images/图片素材/book_no08.gif");
        }
        .a9{
            background-image: url("images/图片素材/book_no09.gif");
        }.a10{
             background-image: url("images/图片素材/book_no10.gif");
         }
        .body:hover{
            background-image: linear-gradient(18deg,blue,dodgerblue);
        }
    </style>
</head>
<body>
    <div class="title">
        畅销书排行
    </div>

    <div class="body">
        <div class="a1">不抱怨的世界(畅...</div>
        <div class="a2">遇见未知的自己...</div>
        <div class="a3">活法（季羡林、...</div>
        <div class="a4">高效能人士的七个习惯</div>
        <div class="a5">被迫强大（北外女生香奈儿...</div>
        <div class="a6">遇见心想事成的自己（《遇...</div>
        <div class="a7">世界上最伟大的推销员（插...</div>
        <div class="a8">我的成功可以复制（唐骏亲...</div>
        <div class="a9">少有人走的路：心智成熟的...</div>
        <div class="a10">活出全新的自己——唤醒...</div>

    </div>
</body>
</html>